<template>
	<view class="login-wrapper">
		<view class="zhuce">注册账号</view>
		<view class="kuai">
			<view class="tongyong">
				邀请人ID
				<input type="text" placeholder="输入邀请人ID" v-model="spread" />
			</view>
			<view class='tongyong' style="height: 90rpx;margin-top: 20rpx;">
				<view class='name' style="display: inline-block;">所在地区</view>
				<view class="" style="display: inline-block;float: right;">
					<picker mode="multiSelector" @change="bindRegionChange"
						@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
						<view class='acea-row'>
							<view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
							<view class='iconfont icon-dizhi fontcolor'></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="tongyong">
				手机号
				<input type="text" placeholder="请输入手机号" v-model="account" />
			</view>
			<view class="tongyong">
				验证码
				<input v-model="captcha" placeholder="请输入手机验证码" />
				<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
					@click="code">
					{{ text }}
				</button>
			</view>
			<view class="tongyong">
				密码
				<input type="password" placeholder="请输入您的密码" v-model="password" />
			</view>
			<view class="tongyong">
				确认密码
				<input type="password" placeholder="请再次输入您的密码" v-model="verifyPassword" />
			</view>
			<view class="">
				<navigator class="forgetPwd"  hover-class="none" 
					url="/pages/users/login/index">
					<span style="float: right;">立即登陆</span>
				</navigator>
			</view>
		</view>
		<view class="view" style="margin-left: 70rpx;">
			<label @click="zhiyin = !zhiyin">
				<checkbox />
				<text class="c_979">
					我已阅读并确认
					<navigator url="/pages/news_details/index?id=6" hover-class="none" style="display: inline-block;color: red;">
						《用户隐私协议》
					</navigator>
				</text>
			</label>
		</view>
		<view class="view">
			<view @click="registerUser">
				<button class='modifyBnt bg-color' formType="submit">注册</button>
			</view>
		</view>
		<uni-popup ref="lPainter" type="center" :maskClick="true">
				<lPainter isRenderImage custom-style="background-color: #fff;z-index:99999;" :board="base"
					@success="path = $event" />
				<view style="color: #fff;
		text-align: center;
		margin-top: 30rpx;">截屏后使用浏览器扫码下载</view>
		</uni-popup>
	</view>
</template>
<script>
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import {
		getCity
	} from '@/api/api.js';
	import {
		register,
		registerVerify,
		// getAPPDownUrl,
		getCodeApi,
		getUserInfo,
	} from "@/api/user";

	const BACK_URL = "login_back_url";

	export default {
		name: "Login",
		mixins: [sendVerifyCode],
		components: {
			
		},
		data: function() {
			return {
				path: null,
				account: "",		//手机号码
				password: "",		//密码
				verifyPassword: "", //确认密码
				payment_code: "", 	//支付密码
				inviteCode: "", 	//邀请码
				spread:"",		//邀请ID
				captcha: "",		//验证码
				formItem: 1,
				type: "login",
				keyCode: "",
				base: null,
				zhiyin: false,
				iosurl: '',
				apkurl: '',
				region: ['省', '市', '区'],
				valueRegion: [0, 0, 0],
				multiArray: [],
				multiIndex: [0, 0, 0],
				cityId: 0,
				regionDval: ['浙江省', '杭州市', '滨江区'],
				district: [],
			};
		},
		onLoad: function(options) {
			this.spread = options.spread
			this.getCityList();
		},
		watch: {
			formItem: function(nval, oVal) {
				if (nval == 1) {
					this.type = "login";
				} else {
					this.type = "register";
				}
			},
		},
		
		mounted: function() {
			//  #ifdef H5

			// this.getDownUrl()
			const {
				user_code
			} = this.$route.query
			if (user_code) {
				this.inviteCode = user_code
			}
			//  #endif 
		},
		methods: {

			// 回去地址数据
			getCityList: function() {
				let that = this;
				getCity().then(res => {
					this.district = res.data
					that.initialize();
				})
			},
			initialize: function() {
				let that = this,
					province = [],
					city = [],
					area = [];
				if (that.district.length) {
					let cityChildren = that.district[0].c || [];
					let areaChildren = cityChildren.length ? (cityChildren[0].c || []) : [];
					that.district.forEach(function(item) {
						province.push(item.n);
					});
					cityChildren.forEach(function(item) {
						city.push(item.n);
					});
					areaChildren.forEach(function(item) {
						area.push(item.n);
					});
					this.multiArray = [province, city, area]
				}
			},
			bindRegionChange: function(e) {
				let multiIndex = this.multiIndex,
					province = this.district[multiIndex[0]] || {
						c: []
					},
					city = province.c[multiIndex[1]] || {
						v: 0
					},
					multiArray = this.multiArray,
					value = e.detail.value;

				this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
				this.cityId = city.v
				this.valueRegion = [0, 0, 0]
				this.initialize();
			},
			bindMultiPickerColumnChange: function(e) {
				let that = this,
					column = e.detail.column,
					value = e.detail.value,
					currentCity = this.district[value] || {
						c: []
					},
					multiArray = that.multiArray,
					multiIndex = that.multiIndex;
				multiIndex[column] = value;
				switch (column) {
					case 0:
						let areaList = currentCity.c[0] || {
							c: []
						};
						multiArray[1] = currentCity.c.map((item) => {
							return item.n;
						});
						multiArray[2] = areaList.c.map((item) => {
							return item.n;
						});
						break;
					case 1:
						let cityList = that.district[multiIndex[0]].c[multiIndex[1]].c || [];
						multiArray[2] = cityList.map((item) => {
							return item.n;
						});
						break;
					case 2:

						break;
				}
				// #ifdef MP || APP-PLUS
				this.$set(this.multiArray, 0, multiArray[0]);
				this.$set(this.multiArray, 1, multiArray[1]);
				this.$set(this.multiArray, 2, multiArray[2]);
				// #endif
				// #ifdef H5 
				this.multiArray = multiArray;
				// #endif



				this.multiIndex = multiIndex
				// this.setData({ multiArray: multiArray, multiIndex: multiIndex});
			},
			getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
			openUrl(type) {
				if (type == 1) {
					try {
						this.$refs.lPainter.open()
						window.open(this.apkurl)
					} catch (error) {
						uni.showModal({
							title: '提示',
							content: '您还未安装浏览器，请先安装浏览器',
							showCancel: false,
							success: function(res) {

							}
						});
					}

				} else {
					window.open(this.iosurl)
				}

			},
			back() {
				this.$util.goBack();
			},
			async getCode() {
				let that = this;
				if (!that.account) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (that.formItem == 2) that.type = "register";
				await registerVerify({
						phone: that.account,
						type: that.type,
						key: that.keyCode
					})
					.then(res => {
						that.$util.Tips({
							title: res.msg
						});

						that.sendCode();
					})
					.catch(res => {
						console.log(res, 'res')
						that.$util.Tips({
							title: res
						});
					});
			},
			code() {
				let that = this
				getCodeApi()
					.then(res => {
						that.keyCode = res.data.key;
						that.getCode();
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			async registerUser() {
				let that = this;
				if (!that.spread)
					return that.$util.Tips({
						title: "请填写邀请人ID",
					});
				if (that.region[0] == '省') 
					return that.$util.Tips({
						title: '请选择所在地区'
					});
				if (!that.account)
					return that.$util.Tips({
						title: "请填写手机号码",
					});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
					return that.$util.Tips({
						title: "请输入正确的手机号码",
					});
				if (!that.captcha)
					return that.$util.Tips({
						title: "请填写验证码",
					});
				if (!/^[\w\d]+$/i.test(that.captcha))
					return that.$util.Tips({
						title: "请输入正确的验证码",
					});
				if (!that.password)
					return that.$util.Tips({
						title: "请填写密码",
					});
				if (!that.verifyPassword)
					return that.$util.Tips({
						title: "请填写确认密码",
					});
				// if (!that.payment_code)
				// 	return that.$util.Tips({
				// 		title: "请填写支付密码",
				// 	});
				if (/^([0-9]|[a-z]|[A-Z]){0,6}$/i.test(that.password))
				  return that.$util.Tips({
				    title: "您输入的密码过于简单",
				  });
				if (that.password != that.verifyPassword)
					return that.$util.Tips({
						title: "两次输入密码不一致",
					});
				if (that.zhiyin == false)
					return that.$util.Tips({
						title: "请勾选同意隐私协议",
					});
				uni.showLoading();
				register({
						account: that.account,
						captcha: that.captcha,
						spread: that.spread,
						spreadID: that.spread,
						password: that.password,
						area: that.area,
						province: that.region[0],
						city: that.region[1],
						district: that.region[2],
					})
					.then((res) => {
						uni.hideLoading();
						uni.showToast({
							title: '注册成功',
							duration: 2000,
							success: () => {
								setTimeout(() => {
									return uni.navigateTo({
										url: "/pages/users/login/index"
									});
								},2000);
							}
						});
					})
					.catch((res) => {
						uni.hideLoading();
						that.$util.Tips({
							title: res,
						});
					});
			},

		},
	};
</script>
<style lang="scss" scoped>
	
	.forgetPwd{
		color: #E5A742;
		margin-top: 30rpx;
	}
	.login-wrapper{
		background: #FFFFFF;
		min-height: 100vh;
	}
	.modifyBnt {
		font-size: 32rpx;
		color: #fff;
		border-radius: 50rpx;
		line-height: 80rpx;
		margin: 60rpx auto auto auto;
		width: 610rpx;
		height: 86rpx;
		background: linear-gradient(180deg, #E5A742 0%, #F2D08E 100%);
		opacity: 1;
	}
	.zhuce{
		font-size: 52rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1B1B2C;
		opacity: 1;
		text-align: center;
		padding-top: 90rpx;
	}
	.kuai{
		height: 860rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 26rpx rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 30rpx;
		margin: 70rpx 70rpx 96rpx 70rpx;
		padding: 32rpx;
		.tongyong {    
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1B232C;
			opacity: 1;
			border-bottom: 1px solid #eee;
			padding: 17rpx 0;
			position: relative;
			input{
				margin: 10rpx 0px;
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #171616;
				.uni-input-placeholder {
					font-size: 28rpx;
					color: #BFC1C4;
				}
			}
			.code{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #E5A742;
				opacity: 1;
				position: absolute;
				right: 0;
				top: 71rpx;
			}
		}
	}
</style>
